<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!--[if lt IE 9]>
	<meta http-equiv="refresh" content="0;ie.html" />
	<![endif]-->

	<link rel="shortcut icon" href="__STATIC__/layout/favicon.ico"> 
	<link href="__STATIC__/layout/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
	<link href="__STATIC__/layout/css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
	<link href="__STATIC__/layout/css/animate.css" rel="stylesheet">
	<link href="__STATIC__/layout/css/style.css?v=4.1.0" rel="stylesheet">
	<link href="__STATIC__/layout/css/channel.css?v=4.1.0" rel="stylesheet">
      <link rel="stylesheet" href="__STATIC__/layout/css/demo.css" type="text/css">
    <link href="__STATIC__/layout/css/gyq.css" rel="stylesheet">
	<script src="__STATIC__/layout/js/jquery.min.js"></script>
	<!-- Sweet Alert -->
	<link href="__STATIC__/layout/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
	<!-- Sweet alert -->
	<script src="__STATIC__/layout/js/plugins/sweetalert/sweetalert.min.js"></script>
	<!-- layer javascript -->
	<script src="__STATIC__/layout/js/plugins/layer/layer.min.js"></script>

</head>
<body class="white-bg" style="color:#333;padding:3px;">
<div class="ibox" >
	<div class="page-heade">
      <h2 class="title_color text-center">营销区域管理</h2>
    </div>
	<div class="ibox-content" style="padding: 2px">
		<form role="form" id="form1" class="form-inline" method="get" action="{:url('index')}">
			<table class="table table-bordered">
				<tr>
					<td>
						<div class="form-group ">
							<label for="search1">分区名称</label>
							<input type="text" name="zoning" value="{$zoning}" placeholder="请输入分区名称" id="search1" class="form-control">
						</div>
					</td>
					<td>
						<div class="form-group ">
							<label for="search2">省份名称</label>
							<input type="text" name="provice" value="" placeholder="请输入省份名称" id="search2" class="form-control">
						</div>
					</td>
					<td>
						<div class="form-group ">
							<label for="search3">城市名称</label>
							<input type="text" name="city" value="" placeholder="请输入城市名称" id="search3" class="form-control">
						</div>
					</td>
				</tr>
				<tr>
					<td>
						<div class="form-group ">
							<label for="search4">经销商名称</label>
							<input type="text" name="jingxiaoshang" value="" placeholder="请输入经销商名称" id="search4" class="form-control">
						</div>
					</td>
					<td colspan="2">
						<div class="form-group ">
							<label for="search5">区域负责人</label>
							<input type="text" name="quyufuzeren" value="" placeholder="请输入区域负责人" id="search5" class="form-control">
						</div>
					</td>
				</tr>
				<tr>
					<td colspan="3" class="text-center">
						<button class="btn btn-info" type="submit">查询</button>
						<button class="btn btn-info" type="reset" id="reset">清空查询条件</button>
					</td>
				</tr>
			</table>

		</form>
		<script>
			$(function () {
//			    重置
				$('#reset').on('click',function () {
					document.getElementById('search1').value = ''
					document.getElementById('search2').value = ''
					document.getElementById('search3').value = ''
					document.getElementById('search4').value = ''
					$('#form1').submit()
					return false
                })
                /*tabel复选框操作*/
                $("#checkall").click(function(){

                    $("[name=items]:checkbox").prop("checked",$(this).prop("checked"));
                    if( $("[name=items]:checkbox").prop("checked")!=true){
                        // console.log($(this))
                        $("[name=items]:checkbox").parents("tr").css("backgroundColor","#fff")
                    }else{
                        $("[name=items]:checkbox").parents("tr").css("backgroundColor","#f8f800")

                    }
                })
                $("[name=items]:checkbox").click(function(){
                    //定义一个临时变量，避免重复使用同一个选择器选择页面中的元素，提高程序效率
                    var $tmp = $("[name=items]:checkbox");
                    if($(this).prop("checked")!=true){
                        $(this).parent().parent().css("backgroundColor","#fff")
                    }else{
                        $(this).parent().parent().css("backgroundColor","#f8f800")
                    }
                    //用filter()方法筛选出选中的复选框，并直接给CheckedAll赋值
                    $("#checkAll").prop('checked',$tmp.length==$tmp.filter(':checked').length);

                })

                /*设置所属省份*/
                $(".setProvice").click(function(){
                    // $("#alert_addNewZone").show();
                    var $items=$("[name=items]:checkbox")

                    if( $items.filter(':checked').length<1){
                        sweetAlert("", "请选择城市！","error");
                    }else{
                        var arr = []
                        $items.filter(':checked').each(function (idx,o) {
							arr.push($(o).val())
                        })
						arr = arr.join('-')
                        //iframe层-父子操作
                        layer.open({
                            type: 2,
                            title: '批量设置所在分区',
                            area: ['700px', '500px'],
                            fixed: false, //不固定
                            maxmin: true,
                            content: '{:url("setprovice")}?cities='+arr
                        });
                        return false
                    }
                });
            })
		</script>
	</div>
	<div class="ibox-content" style="padding: 2px">

		<style>
			.divtable ul{
				list-style:none;
				margin:0;
				padding:0;
				border-collapse: collapse;
			}
			.divtable ul:after{
				content:'';
				display: block;
				clear:both;
			}
			.divtable ul li{
				float:left;
				min-height:30px;
				line-height:30px;
				text-align: center;
				list-style:none;
				border-bottom: 1px solid #DDDDDD;
				text-align: center;
				border: 1px solid #e7e7e7;
				border-collapse: collapse;
				border-right:0;
			}
			.divtable ul li:last-child{
				border-right:1px solid #e7e7e7;
			}
			.divtable ul li.th{
				background-color: #F5F5F6;
				border-bottom:0;
				font-weight:bold;
			}
			.divtable ul:not(:last-child) li{
				border-bottom:0;
			}
			.ccc tr td:first-child{
				border-left:0;
			}
			.ccc tr td:last-child{
				border-right:0;
			}
			.ccc tr:first-child td{
				border-top:0;
			}
			.ccc tr:last-child td{
				border-bottom:0;
			}
			.amendZone{
				display: inline-block;
				width: 36px;
				height: 24px;
				text-align: center;
				line-height: 24px;
				border-radius: 4px;
				border: 1px solid #ccc;
				background: #fff;
			}
		</style>
		<!--<div class="divtable">
			<ul>
				<li style="width:20.44%;" class="th">分区及负责人</li>
				<li style="width:20.44%;" class="th">省份及负责人</li>
				<li style="width:22.48%;" class="th">城市及负责人</li>
				<li style="width:36.64%;" class="th">经销商</li>
			</ul>

			<ul>
				<li style="width:20.44%;" ></li>
				<li style="width:79.56%;" >

					<ul class="divtable">
						<li style="width:25.78%;"></li>
						<li>2</li>
						<li>3</li>
					</ul>
				</li>
			</ul>
		</div>-->

		<table class="table table-bordered ">
			<thead>
				<tr class="text-center info">
					<th style="width:20.35%;text-align: center;">分区及负责人</th>
					<th style="width:20.35%;text-align: center;">省份及负责人</th>
					<th style="width:22.41%;text-align: center;">城市及负责人</th>
					<th style="width:36.89%;text-align: center;">经销商</th>
				</tr>
			</thead>
			<tbody>
			{volist name="data" id="row"}
				<tr>
					<td style="text-align: center;">
						{$row.title}<br>
						<a href="javascript:;">({$row.head})</a><br>
						{volist name="row.admin" id="ad"}
						{$ad.em_name}&nbsp;
						{/volist}
						<br>
						<a href="javascript:;" class="amendZone aaa" data-id="{$row.id}">修改</a>
					</td>
					<td colspan="3" style="padding:0;">
						<table class="table table-bordered ccc" border="0" style="border:0;margin:0;">
						{volist name="row._child" id="row2"}
							<tr>
								<td style="width:25.60%;text-align: center;">
									{$row2.title}<br>
									<a href="javascript:;" >({$row2.head})</a><br>
									{volist name="row2.admin" id="ad2"}
									{$ad2.em_name}&nbsp;
									{/volist}
									<br>
									<a href="javascript:;" class="amendZone bbb" data-id="{$row2.id}">修改</a>
								</td>
								<td colspan="2" style="padding:0;">
									<table class="table table-bordered ccc" border="0" style="border:0;margin:0;">
										{volist name="row2._child" id="row3"}
										<tr>
											<td style="width:37.85%;text-align: center;">
												{$row3.title}<br>
												<a href="javascript:;" >({$row3.head})</a><br>
												{volist name="row3.admin" id="ad3"}
												{$ad3.em_name}&nbsp;
												{/volist}<br>
												<a href="javascript:;" class="amendZone ccca" data-id="{$row3.id}">修改</a>
											</td>
											<td>
												{volist name="row3.jxss" id="jxs"}
												<span>{$jxs.title}</span>&nbsp;
												{/volist}
											</td>
										</tr>
										{/volist}
									</table>
								</td>
							</tr>
						{/volist}
						</table>
					</td>
				</tr>
			{/volist}
			</tbody>
		</table>
	</div>

</div>
</body>
</html>
<script>
    $(function () {
        $('.aaa').on('click',function () {
            var id = $(this).data('id')
            //iframe层-父子操作
            layer.open({
                type: 2,
                title: '修改',
                area: ['700px', '500px'],
                fixed: false, //不固定
                maxmin: true,
                content: '{:url("Zoning/updateview")}?id='+id
            });
            return false
        })
        $('.bbb').on('click',function () {
            var id = $(this).data('id')
            //iframe层-父子操作
            layer.open({
                type: 2,
                title: '修改',
                area: ['700px', '500px'],
                fixed: false, //不固定
                maxmin: true,
                content: '{:url("zprovice/updateview")}?id='+id
            });
            return false
        })
        $('.ccca').on('click',function () {
            var id = $(this).data('id')
            //iframe层-父子操作
            layer.open({
                type: 2,
                title: '修改',
                area: ['700px', '500px'],
                fixed: false, //不固定
                maxmin: true,
                content: '{:url("zcity/updateview")}?id='+id
            });
            return false
        })

		//修改
		$('.xiugai').on('click',function () {
            var id = $(this).data('id')
            //iframe层-父子操作
            layer.open({
                type: 2,
                title: '修改',
                area: ['700px', '500px'],
                fixed: false, //不固定
                maxmin: true,
                content: '{:url("updateview")}?id='+id
            });
            return false
        })

    })
</script>